import {getMeetList, postReserve} from '../../../api/client/client.js'
import {useEffect, useState} from "react";
import {
    Table,
    Button,
    Badge,
    Pagination,
    Form,
    Row,
    Col,
    Input,
    DatePicker,
    Modal, Switch, Space, message,
} from 'antd';
import dayjs from 'dayjs';
import './meeting.less'
import {useNavigate} from "react-router-dom";

const layout = {
    labelCol: {
        span: 5,
    }, wrapperCol: {
        span: 19,
    },
};
const tailLayout = {
    wrapperCol: {
        // offset: 4,
        span: 24,
    },
};
const Meeting = () => {
    const [form] = Form.useForm();
    const {TextArea} = Input;
    const {RangePicker} = DatePicker;
    const [list, setList] = useState([])
    const [pageSize, setPageSize] = useState(10)
    const [pageNum, setPageNum] = useState(1)
    const [total, setTotal] = useState(0)


    let [createdStartTime, setCreatedStartTime] = useState('')
    let [createdEndTime, setCreatedEndTime] = useState('')

    const onShowSizeChange = (current, pageSize) => {
        setPageNum(1)
        setPageSize(pageSize)
        getList(1, pageSize)
    }
    const onChange = (pageNum, pageSize) => {
        setPageNum(pageNum)
        getList(pageNum, pageSize)

    };

    useEffect(() => {
        getList(1, 10)
    }, [])

    const getList = (pageNum, pageSize) => {
        console.log(createdStartTime, createdEndTime);
        console.log(pageNum, 'pageNum')
        console.log(pageSize, 'pageSize')
        const list = {
            name: form.getFieldValue('name'),
            capacity: form.getFieldValue('capacity'),
            equipment: form.getFieldValue('equipment'),
            pageNum: pageNum,
            pageSize: pageSize
        }
        getMeetList(list)
            .then(res => {
                setList(res.data.meeting)
                setPageSize(res.data.pageSize)
                setPageNum(res.data.pageNum)
                setTotal(res.data.total)
            })
            .catch(err => {
                console.log(err, 'err');
            })
    }


    const columns = [
        {
            title: '序号',
            align: 'center',
            width: 60,
            render: (text, record, index) => {
                return <>{index + 1}</>
            },
        },
        {
            title: '会议室名字',
            dataIndex: 'name',
            key: 'name',
            width: 100,
            render: (text, record) => <a
                onClick={() => navigate(`/meeting/detail`, {state: {id: record.id}})}>{text}</a>,
        },
        {
            title: '会议室容量',
            dataIndex: 'capacity',
            key: 'capacity',
            width: 160,
        },
        {
            title: '会议室位置',
            dataIndex: 'location',
            key: 'location',
            width: 160,
        },
        {
            title: '设备',
            dataIndex: 'equipment',
            key: 'equipment',
            width: 200,
        },
        {
            title: '描述',
            dataIndex: 'description',
            key: 'description',
            width: 200,
        },
        {
            title: '状态',
            dataIndex: 'isBooked',
            key: 'isBooked',
            width: 80,
            render: (text) => (
                <span>

          {text && <Badge status="success" text="已预约"/>}
                    {!text && <Badge status="default" text="未预约"/>}
        </span>
            )
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 150,
            render: (text) => (
                <span>
          {dayjs(text).format("YYYY-MM-DD HH:mm:ss")}
        </span>
            )
        },
        {
            title: '操作',
            fixed: 'right',
            width: 50,
            render: (text, record) => (
                <span>
                    <Button type="link" onClick={() => {
                        setIsModalOpen(true)
                        setModalId(record.id)
                    }}>预定</Button>
                </span>
            )
        },
    ];

    const formItemLayout = {
        labelCol: {
            sm: {span: 6},
        },
        wrapperCol: {
            sm: {span: 18},
        },
    }

    const inquire = () => {
        getList(1, pageSize)
    }
    const reset = () => {
        form.resetFields();
        getList(1, 10)
    }

    const onTimeChange = (date, dateString) => {
        setCreatedStartTime(dateString[0])
        setCreatedEndTime(dateString[1])
    }

    const navigate = useNavigate();
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [modalId, setModalId] = useState('')
    const handleOk = () => {
        formModal.validateFields()
            .then((res) => {
                if (res) {
                    postReserveList()
                }
            })
            .catch(err => {
                console.log(err, 'err')
            })
    };

    const handleCancel = () => {

        setIsModalOpen(false);
        formModal.resetFields()
    };
    const [formModal] = Form.useForm();
    const postReserveList = () => {
        postReserve({
            meetingId: Number(modalId),
            startTime: createdStartTime,
            endTime: createdEndTime,
            note: formModal.getFieldValue('note')
        })
            .then(res => {
                if (res.code === 200 || res.code === 201) {
                    setIsModalOpen(false);
                    getList(1, pageSize)
                } else {
                    message.error(res.message)
                }
            })
    }

    return (
        <>
            <div className='filtrate'>
                <Form {...formItemLayout} form={form}>
                    <Row gutter={36}>
                        <Col span={8}>
                            <Form.Item
                                name="name"
                                label="会议室名称"
                            >
                                <Input placeholder="请输入会议室名称"/>
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                name="capacity"
                                label="会议室容量"
                            >
                                <Input placeholder="请输入会议室容量"/>
                            </Form.Item>
                        </Col>

                        <Col span={8}>
                            <Form.Item
                                name="equipment"
                                label="会议室设备"
                            >
                                <Input placeholder="请输入会议室设备"/>
                            </Form.Item>
                        </Col>


                        {/*<Col span={8}>*/}
                        {/*    <Form.Item*/}
                        {/*        name="createdTime"*/}
                        {/*        label="创建时间"*/}
                        {/*    >*/}
                        {/*        <RangePicker onChange={onTimeChange} style={{width: '100%'}} format='YYYY-MM-DD'*/}
                        {/*                     placeholder="创建日期"/>*/}
                        {/*    </Form.Item>*/}
                        {/*</Col>*/}

                        <Col span={24}>
                            <div className='operation'>
                                <Button style={{marginRight: '10px'}} onClick={reset}>重置</Button>
                                <Button type="primary" onClick={inquire}>查询</Button>
                            </div>
                        </Col>
                    </Row>
                </Form>
            </div>
            <div>
                <div className='table'>
                    <Table rowKey='id' scroll={{x: 2000}} columns={columns} dataSource={list}
                           pagination={false}/>
                </div>

                <div className='pagination'>
                    <Pagination
                        showSizeChanger
                        onShowSizeChange={onShowSizeChange}
                        onChange={onChange}
                        showTotal={(total) => `共${total}条记录 第${pageNum}/${Math.ceil(total / pageSize)}页`}
                        total={total}
                        current={pageNum}
                        pageSize={pageSize}
                    />
                </div>
            </div>
            <div>
                <Modal title="会议室预定" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    <Form
                        {...layout}
                        form={formModal}
                        name="control-hooks"
                        style={{
                            width: 400,
                        }}
                    >
                        <Form.Item
                            name="startTime"
                            label="预定时间"
                            rules={[{
                                required: true,
                            },]}
                        >
                            <RangePicker onChange={onTimeChange} style={{width: '100%'}} format='YYYY-MM-DD HH:mm:ss'
                                         placeholder="预定日期"/>
                        </Form.Item>
                        <Form.Item
                            name="note"
                            label="备注"
                            rules={[{
                                required: true,
                            },]}
                        >
                            <TextArea
                                showCount
                                maxLength={100}
                                placeholder="请输入"
                                style={{
                                    height: 80,
                                    resize: 'none',
                                }}
                            />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        </>
    )
}

export default Meeting